<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>main</title>

<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<style>

.aui_main{text-align:center; min-width:9em; min-width:0\9/*IE8 BUG*/; /*padding: 0 0 0 55px;*/}
.form-control{display: inline-block;width: 256px;}
.form-group{position: relative;}
.form-group_label{position: absolute;top: 0px;left: 0px;}
.form-group_diva{display: inline-block;margin: 0 0 0 63px;}
</style>
</head>
<body>
<div class="panel panel-info">
        <!-- Default panel contents -->
        <div class="panel-heading">
       			  [#assign canedit = false /]
        		  [@func_perm url="/role/ajax_save.do"]	
        		  [#assign canedit = true /]
				  <button type="button" class="btn btn-info" id="addButton" onclick="addRole();">
				  	<span class="glyphicon glyphicon-plus"></span>&nbsp;新增
				  </button>
				  [/@func_perm]
				  
				  
				    [#assign candel = false /]
			        [@func_perm url="/role/ajax_del.do"]<!-- 是否可以删除 -->
			        [#assign candel = true /]
			  		[/@func_perm]
<!--				  <button type="button" class="btn btn-default" id="editButton">编辑</button>-->
<!--				  <button type="button" class="btn btn-default" id="delButton">删除</button>-->
        </div>
        
        <!-- Table -->
        <table class="table table-bordered table-hover table-striped">
          <thead>
            <tr>
<!--              <th width="50" style="text-align: center;"><input type="checkbox" id="checkAll"/></th>-->
              <th width="50" >序号</th>
              <th>角色名称</th>
              <th style="text-align: center" width="200">创建时间</th>
              <th style="width:150px;"  >操作</th>
            </tr>
          </thead>
          <tbody>
          	[#list rlist as role]
          		<tr>
	          		<td align="center">${role_index+1}</td>
	          		<td>${role.roleName}</td>
	          		<td >${role.createtime?string("yyyy-MM-dd HH:mm")}</td>
	          		<td>
	          			[#if canedit]
		          		<button type="button" class="btn btn-info btn-xs edits" onclick="edit('${role.id}' , '${role.roleName}')">编辑</button>
		          		[/#if]
		          		[#if candel]
		          		<button type="button" class="btn btn-danger btn-xs delbtn" onclick="del('${role.id}')">删除</button>
		          		[/#if]
	          		</td>
          		</tr>
          	[/#list]
          </tbody>
        </table>
<!--        <div class="panel-footer">注脚-->
<!--        </div>-->
      </div>

<!-- 新建 -->
<div id="create"  style="display: none;"   >
	<form  class="form-horizontal" name="formName"  role="form">
	<input type="hidden"  name="id"  id="id"/>
	  <div class="form-group">
	    <label for="roleName" >角色名称</label>
	      <input class="form-control" id="roleName"  name="roleName" required />
	  </div>
	  <div class="form-group">
	    <label for="roleFunction" class="form-group_label">角色权限</label>
	      <div  class="form-group_diva" style="max-width: 350px;">
	      	<ul id="functionTree">
	      		
	      	</ul>
	      </div>
	  </div>
	  <div class="form-group">
	    <div style="text-align: center;" >
	      <button  onclick="sub(this);"  type="button" class="btn btn-info">提交</button>
	    </div>
	  </div>
	</form>
</div>
</body>
</html>
<script type="text/javascript">
	function addRole(){
		var treeData;
		$.ajax({
			url : '/function/ajax_funTree.do',
			async : false,
			type : 'post',
			dataType : 'json',
			success : function(data){
				treeData = data;
			}
		});

		
		$("#functionTree").tree({
			data : treeData,
			checkbox : true,
			cascadeCheck : false
		});
		
		$("#id").val("");
		$("#roleName").val("");
		var dialog = art.dialog({
			        title: '新增角色',
			        width:500,
			        lock : true,
			        opacity : 0.3,
			        content: document.getElementById('create')
			    });
	}

	function edit(id , roleName){
		$.ajax({
			url : '/role/ajax_Functions.do',
			type : 'post',
			dataType : 'json',
			async :false,
			data : {id : id},
			success : function(data){
				if(data.success){
					var treeData;
					$.ajax({
						url : '/function/ajax_funTree.do',
						async : false,
						type : 'post',
						dataType : 'json',
						data :{
							funcs : data.funcs
						},
						success : function(response){
							treeData = response;
						}
					});
					
					$("#functionTree").tree({
						data : treeData,
						checkbox : true,
						cascadeCheck : false
					});
					$("#id").val(id);
					$("#roleName").val(roleName);
					var dialog = art.dialog({
				        title: '编辑角色',
				        width:500,
				        lock : true,
				        opacity : 0.3,
				        content: document.getElementById('create'),
				    });
				  
				}else{
					error_msg(data.msg , function(){location.reload();});
				}
			}
		});
	}

	function sub(obj){
		$(obj).attr("disabled" , true);
		var roleId = $("#id").val();
		var roleName = $("#roleName").val().trim();
		if(roleName == ""){
			v_validate("请填写角色名称");
			$(obj).attr("disabled" , false);
			return false;
		}
		var selected = $("#functionTree").tree('getChecked');
		if(selected.length == 0){
			v_validate("请为角色分配权限");
			$(obj).attr("disabled" , false);
			return false;
		}
		var funcids = ''
		for(var i = 0 ; i < selected.length ; i++){
			funcids += ',' + selected[i].id;
		}

		$.ajax({
			url : '/role/ajax_add.do',
			type : 'post',
			dataType : 'json',
			data : {
				funcids : funcids , 
				id : roleId ,
				roleName : roleName
			},
			beforeSend:function(){
	            art.dialog.tips("编辑中...");
	        },
			success : function(data){
					if(data.success){
						/* succ_msg(data.msg , function(){location.reload();}); */
// 						location.href="/role/ajax_Functions.do?id="+id+"&roleName="+roleName
		               location.reload();
					}else{
						error_msg(data.msg , function(){location.reload();});
					}
			}
		});
	}

	
	
	function del(id){
		art.dialog.confirm('是否确认删除' , function(){
				$.ajax({
					url : '/role/ajax_del.do',
					type : 'post',
					dataType : 'json',
					data : {
						id : id
					},
					beforeSend:function(){
			            art.dialog.tips("删除中...");
			        },
					success : function(data){
						if(data.success){
							location.reload();
						}else{
							error_msg(data.msg , function(){location.reload();});
						}
					}
				});
			});
	}
</script>
